<template>
  <div id="path">
    <div class="max-width container pt-0">
      <h1 class="title">{{ $t(`path.标题`) }}</h1>

      <ul>
        <li class="flex mb-20 p-20 radius" v-for="(v, i) in 4" :key="i">
          <img
            class="radius mr-20 flex-fs-0"
            style="width: 70px; height: 70px"
            src="@/assets/img/path.png"
          />
          <div class="flex-1">
            <div class="fz-16 fw-bold cl-black">
              {{ $t(`path.${i + 1}.标题`) }}
            </div>

            <div class="fz-14 cl-basic">
              <div>{{ $t(`path.${i + 1}.描述`) }}</div>

              <div v-if="i === 0">
                <div>{{ $t(`path.${i + 1}.步骤1`) }}</div>
                <div>{{ $t(`path.${i + 1}.步骤2`) }}</div>
                <div>{{ $t(`path.${i + 1}.步骤3`) }}</div>
              </div>
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
}
</script>

<style lang="scss" scoped>
#path {
  ul {
    li {
      background-color: #f2effc;
    }
  }
}
</style>
